<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>所有用户</title>
    <link rel="stylesheet" href="__TPL__/frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="__TPL__/frame/static/css/style.css">
    <link rel="icon" href="__TPL__/frame/static/image/code.png">
    <style>
        .layui-form-switch {
            position: relative;
            height: 24px;
            line-height: 24px;
            width: 56px;
            padding: 0 5px;
            margin-top: 8px;
        }

        .layui-colla-title button {
            margin-top: 6px;
            margin-left: 6px;
        }

        .layui-colla-content button {
            margin-top: -4px;
            margin-left: 6px;
        }
    </style>
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#xe9aa</i></a>
    </span>
</div>

<!-- 面板 -->

<div class="layui-collapse" lay-filter="test">
    {volist name="menus" id="vo"}
    <div class="layui-colla-item">
        <h2 class="layui-colla-title"><i class="layui-icon">{$vo.icon}</i>&nbsp;&nbsp;{$vo.text}
            {if condition="$vo.status eq 1"}
            <button class="layui-btn layui-btn-small fr status-change" val="{$vo.id}">关闭</button>
            {else /}
            <button class="layui-btn layui-btn-small  layui-btn-danger fr status-change" val="{$vo.id}">开启</button>
            {/if}
            <button class="layui-btn layui-btn-small  layui-btn-normal fr edit" val="{$vo.id}">编辑</button>
            <div style="width: 20%" class="fr">排序:{$vo.sort}</div>
            <div style="width: 40%;overflow: hidden;height: inherit" class="fr">{$vo.describe}</div>
        </h2>
        {volist name="vo.subject" id="sub"}
        <div class="layui-colla-content">
            <ul>
                <li><i class="layui-icon">{$sub.icon}</i>&nbsp;&nbsp;{$sub.text}
                    {if condition="$sub.status eq 1"}
                    <button class="layui-btn layui-btn-small fr status-change" val="{$sub.id}">关闭</button>
                    {else /}
                    <button class="layui-btn layui-btn-small  layui-btn-danger fr status-change" val="{$sub.id}">开启
                    </button>
                    {/if}
                    <button class="layui-btn layui-btn-small  layui-btn-normal fr edit" val="{$sub.id}">编辑</button>
                    <div style="width: 20%" class="fr">排序:{$sub.sort}</div>
                    <div style="width: 40%;overflow: hidden;height: inherit" class="fr">{$sub.describe}</div>

                </li>
            </ul>
        </div>
        {/volist}
    </div>
    {/volist}
</div>


<script type="text/javascript" src="__TPL__/frame/layui/layui.js"></script>
<script type="text/javascript" src="__TPL__/js/index.js"></script>
<script>

    layui.use(['layer', 'vip_table', 'jquery'], function () {
        var $ = layui.$;
        // 刷新
        $('#btn-refresh').on('click', function () {
            location.reload();
        });

        $('.status-change').click(function (e) {
            var id = $(this).attr('val');
            layer.open({
                content: '是否修改当前菜单状态?'
                , yes: function (index, layero) {
                    $.ajax({
                        url: '{:url("Auth/menuStatusChange")}',
                        data: {id: id},
                        dataType: 'json',
                        type: 'post',
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, {icon: 1, time: 2000});
                                location.reload();
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 2000})
                            }
                            layer.close(index);
                        }
                    })
                }
            });
            return false;
        });

        $('.edit').click(function (e) {
            var id = $(this).attr('val');
            layer.open({
                type: 2,
                title: '修改菜单',
                content: '{:url("Auth/showEditMenu")}?id=' + id,
                area: ['340px', '450px'],
                maxmin: true

            });
            return false;
        });
        $('#btn-add').click(function (e) {
            layer.open({
                type: 2,
                title: '新增菜单',
                content: '{:url("Auth/showAddMenu")}',
                area: ['340px', '450px'],
                maxmin: true
            });
            return false;
        });
    });

</script>

</body>
</html>